<script setup>
import {useMoneyDetail} from "./use_money_detail";

const { type, is_more, list } = useMoneyDetail()
</script>
<template>

  <u-navbar
    title="零钱明细"
    placeholder
    titleStyle="color:black"
    leftIconColor="#000"
    auto-back
  >
  </u-navbar>
  <view>
    <view class="tishi" v-if="type === 3">
      提示:5月份以前的商家返佣记录无法显示,请进入订单详情进行查看
    </view>
    <view v-for="(item, index) in list" :key="index" class="list">
      <view class="left">
        <text>{{ item.title }}</text>
        <text style="margin-top: 10rpx">{{ item.create_time }}</text>
      </view>
      <view :class="'right ' + (item.type === 3 || item.type === 5 || item.type === 7? '' : 'type2')">
        {{ item.type === 3 || item.type === 5 || item.type === 7 ? item.amount : '+' +item.amount }}
      </view>
    </view>

    <view class="nodata" v-if="list.length === 0">
      <view>
        <image src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01lHi68c1SCE3JVy9Qs_!!3829152210.png"
               mode="widthFix"></image>
      </view>
      <view>~暂无明细~</view>
    </view>
  </view>
  <view class="nodata" v-if="list.length > 0 && is_more">
    <view>没有更多数据~</view>
    <u-safe-bottom></u-safe-bottom>
  </view>
</template>

<style lang="scss" scoped>
page{
  background: #f4f4f6;
}
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
}

/* pages/moneyList/moneyList.wxss */
.list {
  margin: 20rpx 20rpx;
  padding: 30rpx 48rpx;
  color: #333;
  overflow: hidden;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06);
}

.list .left {
  float: left;
}

.list .left text:nth-child(1) {
  font-size: 28rpx;
  display: block;
  color: #77777d;
}

.list .left text:nth-child(2) {
  font-size: 22rpx;
  color: #8b8b99;
  display: block;
  line-height: 40rpx;
}

.list .right {
  float: right;
  line-height: 80rpx;
  font-size: 36rpx;
  color: #2dc197;
  font-weight: 700;
}

.status {
  height: 40rpx;
  width: 125rpx;
  line-height: 40rpx;
  text-align: center;
  color: white;
  font-size: 20rpx;
  position: absolute;
  transform: rotate(-44deg);
  background-color: #db4444;
  left: -32rpx;
  top: 10rpx;
}

.status0 {
  background-color: #ccc;
}

.status2 {
  background-color: #F0AD4E;
}

.status3 {
  background-color: #db4444;
}

.list .type2 {
  color: #db4444;
}

.tishi {
  margin: 0 20rpx;
  line-height: 50rpx;
  text-align: center;
  color: #db4444;
  background-color: aliceblue;
  font-size: 26rpx;
}

.nodata {
  margin: 0 auto;
  padding: 30rpx;
  text-align: center;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 400rpx;
  }
}
</style>
